<template>
	<view class="u-line-2">
		<view class="hdl-rank">
			<u-waterfall v-model="messageList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<u-card :show-head="false" margin="15rpx 15rpx 15rpx 30rpx" padding="0">
							<view slot="body">
								<navigator :url="'../images/images?illustId='+item.id">
									<u-image :src="item.imageUrls[0].medium.replace('https://i.pximg.net','https://i.pixiv.cat')" mode="widthFix"></u-image>
								</navigator>
							</view>
							<view class="u-p-20" slot="foot">{{item.title}}</view>
						</u-card>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<u-card :show-head="false" margin="15rpx 30rpx 15rpx 15rpx" padding="0">
							<view class="u-padding-0" slot="body">
								<navigator :url="'../images/images?illustId='+item.id">
									<u-image src="" :src="item.imageUrls[0].medium.replace('https://i.pximg.net','https://i.pixiv.cat')" mode="widthFix"></u-image>
								</navigator>
							</view>
							<view class="u-p-20" slot="foot">{{item.title}}</view>
						</u-card>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" icon-type="flower" :status="loadStatus" :load-text="loadeText" @loadmore="loadNextPage" />
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		onReady:function(){
			// 将当日日期提前一天，并存入today中
			this.today.setTime(this.today.getTime()-24*60*60*1000);
			// 获取日排行数据并展示
			this.getRanksData({})
		},
		onReachBottom: function() {
			this.loadNextPage()
		},
		data() {
			return {
				messageList: [],
				loadStatus: "loadmore",
				loadeText: {
					loadmore: "不要再往上拉屏幕啦！",
					loading: "噗噗噗~",
					nomore: "已经一滴也不剩了…"
				},
				today: new Date(),
				page:0,
			}
		},
		methods: {
			// 获取排行数据，默认日排行
			getRanksData({date,mode="day",page=++this.page,pageSize=30}) {
				if (!date) {
					let todayStr = this.today.getFullYear() + "-" + (this.today.getMonth()+1) + "-" + this.today.getDate();
					date = todayStr
				}
				this.$api.rank.ranks({
					date,
					mode,
					page,
					pageSize
				})
				.then(res=>{
					if (res.data) {
						this.isEmptyShow = false
						setTimeout(()=>{
							this.loadStatus = "loadmore"
							this.messageList.push(...res.data)
						},200)
					}else {
						// 没有结果时，天数往前一天，再次请求
						this.today.setTime(this.today.getTime()-24*60*60*1000);
						let todayStr = this.today.getFullYear() + "-" + (this.today.getMonth()+1) + "-" + this.today.getDate();
						date = todayStr
						this.$api.rank.ranks({
							date,
							mode,
							page,
							pageSize
						})
						.then(res=>{
							if (res.data) {
								this.isEmptyShow = false
								setTimeout(()=>{
									this.loadStatus = "loadmore"
									this.messageList.push(...res.data)
								},200)
							}else {
								this.loadStatus = "loadmore"
								this.uLoadmoreClass = "hdl-hide"
								this.isEmptyShow = true
								// 展示提示框
								this.$refs.uToast.show({
									title: "好像什么地方出错了诶(⊙ˍ⊙)?",
									type: "warning",
									duration:1500
								})
							}
						})
					}
				})
				.catch(err=>{
					console.log(err);
				})
			},
			loadNextPage() {
				this.getRanksData({})
			}
		}
	}
</script>

<style lang="scss">
	.rank {
		view {
			width: 100px;
		}
	}
</style>
